<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图文管理系统</title>
    <!-- 引入 Bulma CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
    <!-- 引入 Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <style>
        /* 调整容器样式 */
        .container {
            max-width: 80% !important; /* 稍微增加宽度 */
            padding: 1rem;
            margin-top: 1rem;
        }

        /* 优化卡片样式 */
        .card {
            height: 100%;
            display: flex;
            flex-direction: column;
            transition: transform 0.2s ease;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        /* 优化图片容器 */
        .card-image {
            position: relative;
            overflow: hidden;
        }

        .image img {
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .card:hover .image img {
            transform: scale(1.05);
        }

        /* 响应式布局优化 */
        @media screen and (min-width: 1024px) {
            .column.is-3-desktop {
                flex: 0 0 20%;
                max-width: 20%;
            }
        }

        @media screen and (min-width: 1440px) {
            .column.is-3-desktop {
                flex: 0 0 16.666%;
                max-width: 16.666%;
            }
        }

        /* 移动端优化 */
        @media screen and (max-width: 768px) {
            .container {
                max-width: 100% !important;
                padding: 0.5rem;
            }
        }

        /* 加载动画样式 */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        /* 右侧导航菜单样式 */
        .menu-list a {
            border-radius: 4px;
            padding: 0.5em 0.75em;
            margin-bottom: 0.25em;
            transition: all 0.2s ease;
        }

        .menu-list a:hover {
            background-color: #f5f5f5;
            transform: translateX(5px);
        }

        .menu-list a.is-active {
            background-color: #3273dc;
            color: white;
        }

        /* 固定右侧导航 */
        @media screen and (min-width: 769px) {
            .menu {
                position: sticky;
                top: 1rem;
            }
        }

        /* 移动端响应式调整 */
        @media screen and (max-width: 768px) {
            .columns {
                flex-direction: column-reverse;
            }

            .column.is-3 {
                padding-bottom: 1rem;
            }
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 加载遮罩层 -->
    <div class="loading-overlay" v-if="isLoading">
        <div class="loading-spinner"></div>
    </div>

    <div class="container">
        <!-- 顶部选项切换 -->
        <div class="field mt-4 mb-4">
            <div class="control">
                <label class="radio">
                    <input type="radio" name="gua_main" value="0" v-model="selectedOption" @change="loadCategories">
                    选项 1
                </label>
                <label class="radio">
                    <input type="radio" name="gua_main" value="1" v-model="selectedOption" @change="loadCategories">
                    选项 2
                </label>
                <label class="radio">
                    <input type="radio" name="gua_main" value="2" v-model="selectedOption" @change="loadCategories">
                    选项 3
                </label>
            </div>
        </div>

        <!-- 搜索框 -->
        <div class="field mb-4">
            <div class="control">
                <input class="input" type="text" v-model="searchQuery" placeholder="搜索...">
            </div>
        </div>

        <!-- 主体内容区域：左侧图文网格，右侧导航 -->
        <div class="columns">
            <!-- 导航菜单 -->
            <div class="column is-1">
                <aside class="menu">
                    <ul class="menu-list">
                        <li v-for="category in categories"
                            :key="category.id">
                            <a @click="selectCategory(category.id)"
                               :class="{ 'is-active': currentCategory === category.id }">
                                {{ category.title }}
                            </a>
                        </li>
                    </ul>
                </aside>
            </div>

            <!-- 图文网格 -->
            <div class="column is-11">
                <div class="columns is-multiline">
                    <div v-for="item in mediaItems"
                         :key="item.id"
                         class="column is-3-desktop is-4-tablet is-6-mobile">
                        <div class="card">
                            <div class="card-image">
                                <figure class="image is-9by5">
                                    <a :href="item.url" target="_blank">
                                        <img :src="item.img" :alt="item.tit">
                                    </a>
                                </figure>
                            </div>
                            <div class="card-content">

                                <p class="title is-6">{{ item.tim }}</p>
                                <p class="subtitle is-6">{{ item.tit }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 分页控制 -->
                <div class="columns is-vcentered mt-4">
                    <div class="column">
                        <nav class="pagination" role="navigation">
                            <button
                                    class="button pagination-previous"
                                    :disabled="currentPage === 1"
                                    @click="previousPage"
                            >
                                上一页
                            </button>
                            <button
                                    class="button pagination-next"
                                    :disabled="!hasNextPage"
                                    @click="nextPage"
                            >
                                下一页
                            </button>
                        </nav>
                    </div>
                    <div class="column is-narrow">
                        <div class="field has-addons">
                            <div class="control">
                                <input class="input" type="text" v-model="pageInput" @blur="goToPage" placeholder="页码">
                            </div>
                            <div class="control">
                                <button class="button is-info" @click="goToPage">跳转</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    const {createApp, ref, onMounted, watch} = Vue

    createApp({
        setup() {
            // 响应式状态
            const isLoading = ref(false)
            const categories = ref([])
            const mediaItems = ref([])
            const currentCategory = ref(null)
            const searchQuery = ref('')
            const currentPage = ref(1)
            const selectedOption = ref(0)
            const pageInput = ref('')
            const hasNextPage = ref(true)

            // 加载分类
            const loadCategories = async () => {
                isLoading.value = true
                const response = await fetch(`http://192.168.1.7:5000/gua_01/nav?gua=${selectedOption.value}`)
                isLoading.value = false
                if (!response.ok) {
                    throw new Error('获取数据失败')
                }
                const data = await response.json()
                categories.value = data.data
                currentCategory.value = data.data[0].id
                currentPage.value = 1
                loadMediaItems()
            }

            // 加载媒体内容
            const loadMediaItems = async () => {
                pageInput.value = currentPage.value
                const params = new URLSearchParams({
                    path: currentCategory.value || '',
                    page: currentPage.value,
                    pageSize: 12,
                    gua: selectedOption.value,
                    search: searchQuery.value
                })
                isLoading.value = true
                const response = await fetch(`http://192.168.1.7:5000/gua_01/list?${params.toString()}`)
                isLoading.value = false
                if (!response.ok) {
                    throw new Error('获取数据失败')
                }
                const data = await response.json()
                mediaItems.value = data.data
            }

            // 分类选择
            const selectCategory = (categoryId) => {
                currentCategory.value = categoryId
                currentPage.value = 1
                loadMediaItems()
            }

            // 分页控制
            const previousPage = () => {
                if (currentPage.value > 1) {
                    currentPage.value--
                    loadMediaItems()
                }
            }

            const nextPage = () => {
                if (hasNextPage.value) {
                    currentPage.value++
                    loadMediaItems()
                }
            }

            const goToPage = () => {
                const page = parseInt(pageInput.value)
                if (page && page > 0) {
                    currentPage.value = page
                    loadMediaItems()
                }
            }

            // 监听搜索
            watch(searchQuery, () => {
                currentPage.value = 1
                loadMediaItems()
            })

            // 组件挂载时加载数据
            onMounted(() => {
                loadCategories()
            })

            return {
                isLoading,
                categories,
                mediaItems,
                currentCategory,
                searchQuery,
                currentPage,
                pageInput,
                hasNextPage,
                selectedOption,
                selectCategory,
                previousPage,
                nextPage,
                goToPage,
                loadCategories
            }
        }
    }).mount('#app')
</script>
</body>
</html>